<template>
  <div class="page"  v-show="show">
    <div class="pagelist">
      <span class="jump Prev"v-show="current_page > 1" @click="prev">< Prev</span>
      <span v-show="current_page>6 && pages > 8" class="jump" @click="jumpPage(1)">1</span>
      <span class="ellipsis"  v-show="efont && current_page > 6">...</span>
      <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page === num}" @click="jumpPage(num)">{{num}}</span>
      <span class="ellipsis"  v-show="efont && current_page +2 < pages">...</span>
      <span v-show="current_page+2 <pages" class="jump" @click="jumpPage(pages)">{{pages}}</span>
      <span class="jump Next" @click="next" v-show="current_page !== pages">Next ></span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      pages: {   //总页数
        type: Number,
        default: 1
      },
      curPage: Number
    },
    created () {

    },
    data() {
      return {
        current_page: this.curPage || 1, //当前页
        changePage:'',//跳转页
        nowIndex:0
      }
    },
    computed: {
      show(){
        return this.pages && this.pages !==1
      },
      efont() {
        if (this.pages <= 3) return false;
        return this.current_page >= 1
      },
      indexs() {
        let left = 1
        let right = this.pages
        let arr = []
        if (this.pages >= 3) {
          if (this.current_page > 2&&this.current_page +1 < this.pages) {
            if(this.current_page > 6){
              left = Number(this.current_page) - 2
            }else {
              left = Number(this.current_page) - this.current_page
            }
            right = Number(this.current_page) + 2
          } else {
            if (this.current_page <= 3) {
              left = 1
              right = 3
            } else {
              right = this.pages
              left = this.pages - 2
            }
          }
        }
        while (left <= right) {
          arr.push(left)
          var NewArr = arr.filter(function (x) {
                 return x !== 0;
             });
          left++
        }
        return NewArr
      }
    },
    methods: {
      jumpPage: function(id) {
          if(id > this.pages){
            this.changePage = this.pages
            this.current_page = this.changePage
          }else if(id <=0){
            this.changePage = 1
            this.current_page = this.changePage
          } else {
            this.current_page = Number(id)
          }
        this.$emit('changePage', this.current_page)
        $('html ,body').animate({scrollTop: 0}, 300)
      },
      next() {
        this.current_page++
        this.$emit('changePage', this.current_page)
        $('html ,body').animate({scrollTop: 0}, 300)
      },
      prev() {
        this.current_page--
        $('html ,body').animate({scrollTop: 0}, 300)
        this.$emit('changePage', this.current_page)

      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

  input[type=number] {
    -moz-appearance:textfield;
  }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .page {
    font-weight: 900;
    height: 40px;
    text-align: center;
    color: #888;
    margin: 20px auto 0;
    background: #f2f2f2;
  }

  .pagelist {
    font-size: 0;
    background: #fff;
    height: 50px;
    line-height: 50px;
  }

  .pagelist span {
    font-size: 18px;
  }

  .pagelist .jump {
    padding: 7px 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 15px;
  }

  .pagelist .bgprimary {
    cursor: default;
    color: #18823a
    border: 1px solid #18823a
  }
  .pagelist .Prev {
    cursor: pointer;
    color: #fff
    font-size 18px
    background #18823a
    display inline-block
    line-height 41px
    text-align center
    padding 0
    width 89px !important
    height 41px !important
    border: 1px solid #18823a
    margin-right 114px
  }
  .pagelist .Next {
    cursor: pointer;
    color: #fff
    font-size 18px
    background #18823a
    display inline-block
    line-height 41px
    text-align center
    padding 0
    width 89px !important
    height 41px !important
    border: 1px solid #18823a
    margin-left 114px
  }

  .jumpinp input {
    width: 55px;
    height: 26px;
    font-size: 13px;
    border: 1px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
  }

  .ellipsis {
    padding: 0 8px;
    margin-left: 15px;
  }

  .jumppoint {
    margin-left: 30px;
  }

  .pagelist .gobtn {}

  .bgprimary {
    cursor: default;
    color: #18823a
    border: 1px solid #18823a
  }
</style>
